<!--点击按钮一次往select列表里添加数组里的数据-->
<!--
<template>
  <div class="me6">
    <select>
      <option v-for="lis in newList" :value="lis.value">{{lis.name}}</option>
    </select>
    <button @click="put">点击我添加</button>
  </div>
</template>

<script>


  export default {
    name: 'app',
    data() {
      return {
        lists: [
          {name: '张三', value: '1'},
          {name: '李四', value: '2'},
          {name: '王八', value: '3'},
          {name: '赵六', value: '4'},
          {name: '田七', value: '5'},
          {name: '王五', value: '6'},
          {name: '喝酒', value: '7'}
        ],
        newList: []
      }
    },
    methods: {
      put() {
        let news = this.lists
        if (this.lists.length !== 0) {
          this.newList.push(news[0])
          this.lists.splice(0,1)
        }else{
          alert('没数据了，四不四傻')
        }
      }
    },
    components: {}
  }
</script>

<style lang="scss">
  .me6 {
    padding-top: 60px;
  }
</style>
-->
<!--下拉实现不同页面的切换-->
<!--
<template>
  <div class="me6">
    <div class="month_type border-bottom-last">
      <li class="month_li" @click="selectMonth">
        <span>时间筛选：</span>
        <span class="span-color" v-show="monthValue === 'OneMonth'">近1个月</span>
        <span class="span-color" v-show="monthValue === 'ThreeMonth'">近3个月</span>
        <span class="span-color" v-show="monthValue === 'SixMonth'">近6个月</span>
        <span class="span-color" v-show="monthValue === 'OneYears'">近1年</span>
      </li>
    </div>
    <div class="mypopup">
      <mt-popup
        v-model="showMonth"
        popup-transition="popup-fade">
        <div class="mysex" @click="monthValueData">
          <mt-radio
            v-model="monthValue"
            :options="monthType">
          </mt-radio>
        </div>
      </mt-popup>
    </div>
    <div class="me6_content">
      <div class="content1" v-show="monthValue === 'OneMonth'">我是近一个月的列表</div>
      <div class="content2" v-show="monthValue === 'ThreeMonth'">我是近三个月的列表</div>
      <div class="content33" v-show="monthValue === 'SixMonth'">我是近六个月的列表</div>
      <div class="content4" v-show="monthValue === 'OneYears'">我是近半年的列表</div>
    </div>
  </div>
</template>

<script>


  export default {
    name: 'app',
    data() {
      return {
        showMonth: false,
        monthValue: 'OneMonth',
        monthType: [
          {
            label: '近1个月',
            value: 'OneMonth'
          },
          {
            label: '近3个月',
            value: 'ThreeMonth'
          },
          {
            label: '近6个月',
            value: 'SixMonth'
          },
          {
            label: '近1年',
            value: 'OneYears'
          }
        ]
      }
    },
    created() {
      console.log(this.monthValue)
    },
    methods: {
      selectMonth() {
        this.showMonth = !this.showMonth
      },
      monthValueData() {
        this.showMonth = false
      },
    },
    components: {}
  }
</script>

<style lang="scss">
  .me6 {
    padding-top: 60px;
    position: relative;
    li {
      list-style: none;
    }
    .month_type {
      width: 100%;
      height: 40px;
      position: fixed;
      z-index: 20;
      top: 80px;
      .month_li {
        font-size: 13px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #d7d7d7;
        span {
          &.span-color {
            color: #000;
          }
          small {
            color: #999;
          }
        }
        img {
          position: absolute;
          right: 95px;
          top: 13px;
          width: 20px;
          height: 20px;
        }
        input {
          border: none;
          outline: none;
          font-size: 16px;
          color: #888;
          &.code_input {
            width: 80px;
          }
        }
      }
    }
    .mypopup {
      .mint-popup {
        width: 65%;
        height: 32%;
      }
    }
    .me6_content {
      width: 100%;
      height: 300px;
      position: absolute;
      top: 120px;
      .content1 {
        width: 100%;
        height: 300px;
        background: red;
      }
      .content2 {
        width: 100%;
        height: 300px;
        background: orange;
      }
      .content33 {
        width: 100%;
        height: 300px;
        background: yellow;
      }
      .content4 {
        width: 100%;
        height: 300px;
        background: greenyellow;
      }
    }
  }
</style>
-->
<template>
  <div class="me6">
    <div class="month_type border-bottom-last">
      <li class="month_li">
        <span>时间筛选：</span>
        <select v-model="selected">
          <option :click="keepMonth(index)" v-for="(item,index) in monthType" :value="item.value">{{item.label}}</option>
        </select>
        <span>Selected: {{ selected }}</span>
      </li>
    </div>
    <div class="me6_content">
      <div class="content1" v-show="selected === 'OneMonth'">我是近一个月的列表</div>
      <div class="content2" v-show="selected === 'ThreeMonth'">我是近三个月的列表</div>
      <div class="content33" v-show="selected === 'SixMonth'">我是近六个月的列表</div>
      <div class="content4" v-show="selected === 'OneYears'">我是近半年的列表</div>
    </div>
  </div>
</template>

<script>


  export default {
    name: 'app',
    data() {
      return {
        selected: 'OneMonth',
        monthType: [
          {
            label: '近1个月',
            value: 'OneMonth'
          },
          {
            label: '近3个月',
            value: 'ThreeMonth'
          },
          {
            label: '近6个月',
            value: 'SixMonth'
          },
          {
            label: '近1年',
            value: 'OneYears'
          }
        ]
      }
    },
    created() {

    },
    methods: {
      keepMonth() {
        console.log(1)
      }
    },
    components: {}
  }
</script>

<style lang="scss">
  .me6 {
    padding-top: 60px;
    position: relative;
    li {
      list-style: none;
    }
    .month_type {
      width: 100%;
      height: 40px;
      position: fixed;
      z-index: 20;
      top: 80px;
      .month_li {
        font-size: 13px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #d7d7d7;
        span {
          &.span-color {
            color: #000;
          }
          small {
            color: #999;
          }
        }
        img {
          position: absolute;
          right: 95px;
          top: 13px;
          width: 20px;
          height: 20px;
        }
        input {
          border: none;
          outline: none;
          font-size: 16px;
          color: #888;
          &.code_input {
            width: 80px;
          }
        }
      }
    }
    .mypopup {
      .mint-popup {
        width: 65%;
        height: 32%;
      }
    }
    .me6_content {
      width: 100%;
      height: 300px;
      position: absolute;
      top: 120px;
      .content1 {
        width: 100%;
        height: 300px;
        background: red;
      }
      .content2 {
        width: 100%;
        height: 300px;
        background: orange;
      }
      .content33 {
        width: 100%;
        height: 300px;
        background: yellow;
      }
      .content4 {
        width: 100%;
        height: 300px;
        background: greenyellow;
      }
    }
  }
</style>
